<template>
    <h1>工作台</h1>
    <a-button type="primary" @click="openDialog">测试</a-button>
    <a-modal v-model:visible="visible" title="选择图标" style="width: 700px;">
        <a-tabs>
            <a-tab-pane v-for="(item,index) in titleList" :key="index" :tab="item">
                <icon v-for="(iconitem,iconIndex) in iconList[index]" 
                    :style="{fontSize:'25px'}"
                    :key="iconIndex" 
                    @click="selectIcon(iconitem)">
                    <component :is="iconitem"></component>>
                </icon>
            </a-tab-pane>
        </a-tabs>
    </a-modal>
</template>

<script lang='ts' setup>

import {ref} from 'vue'
import iconCategories, { CategoriesKeys, categoriesLabels, iconThemes } from "@/config/icons";
let visible=ref<boolean>(false)
let myicon=ref(null)
const openDialog=()=>{
    visible.value=true
}
const titleList=Object.keys(iconCategories).map(item=>{
    return categoriesLabels[item as CategoriesKeys]
   
})

const iconList=Object.keys(iconCategories).map(item=>{
    return iconCategories[item as CategoriesKeys].map((o:string)=>{
        return o+iconThemes.Outlined
        
    })  
})
const selectIcon=(item:string)=>{
   
}
</script>


<style lang='scss' scoped>
</style>